<template>
  <div id='personal'>
    <header>
      <div>
        <div class="hd-l" @click='back'>
          <i class="iconfont icon-fanhui"></i>
        </div>
        <h2>我的</h2>
      </div>
    </header>
    <section class="login">
      <router-link :to="url">
        <i class="iconfont icon-touxiang1"></i>
        <div class="left" v-if='loader'>
          <h2>{{ users.username }}</h2>
          <p>
            <svg viewBox="0 0 40 40" id="vip" width="100%" height="100%">
              <path d="M7 33.4c0 1.1.9 1.6 2 1.6h22c1.1 0 2-.5 2-1.6V31H7v2.4z"></path>
              <path d="M32.1 14.3c-.6 2.3-2.6 4-5.1 4-2.9 0-5.3-2.3-5.3-5.2v-.2c-.5.2-1 .3-1.6.3-.6 0-1.1-.1-1.7-.3v.2c0 2.9-2.4 5.2-5.3 5.2-2.5 0-4.6-1.7-5.1-4.1-.5.4-1.2.6-1.8.6-.3 0-.5.1-.8 0L7.2 29h26l1.7-14.2c-.3.1-.5.1-.8.1-.8 0-1.5-.2-2-.6z" class="st0"></path>
              <ellipse cx="20.1" cy="8.2" rx="3.2" ry="3.2"></ellipse>
              <ellipse cx="6.4" cy="10.5" rx="2.4" ry="2.4"></ellipse>
              <ellipse cx="33.8" cy="10.5" rx="2.4" ry="2.4"></ellipse>
            </svg>
            {{ users.phone }}
          </p>
        </div>
        <div class="left" v-else>
          <h2>登录/注册</h2>
          <p>
            <i class="iconfont icon-shouji"></i>
            登录后享受更多提权
          </p>
        </div>
        <i class="iconfont icon-xiangyou"></i>
      </router-link>
    </section>
    <div class="points">
      <a href="#">
        <i class="iconfont icon-xin"></i>
        优惠
      </a>
      <a href="#">
        <i class="iconfont icon-jifen"></i>
        积分
      </a>
    </div>
    <section class="common">
      <a href="#">
        <svg viewBox="0 0 40 40" id="order" width="100%" height="100%">
          <path d="M31.5 3h-23C6 3 4 5.1 4 7.7v24.7C4 34.9 6 37 8.5 37h23c2.5 0 4.5-2.1 4.5-4.7V7.7C36 5.1 34 3 31.5 3zM11.8 28.2c-1.1 0-2-.9-2-2.1 0-1.1.9-2.1 2-2.1s2 .9 2 2.1c0 1.2-.9 2.1-2 2.1zm0-6.1c-1.1 0-2-.9-2-2.1 0-1.1.9-2.1 2-2.1s2 .9 2 2.1c0 1.1-.9 2.1-2 2.1zm0-6.2c-1.1 0-2-.9-2-2.1 0-1.1.9-2.1 2-2.1s2 .9 2 2.1c0 1.2-.9 2.1-2 2.1zm5.1 11.9h13.5v-2.6H16.9v2.6zm0-6.5h13.5v-2.6H16.9v2.6zm0-6.6h13.5v-2.6H16.9v2.6z"></path>
        </svg>
        <div>
          <span>我的订单</span>
          <i class="iconfont icon-xiangyou"></i>
        </div>
      </a>
      <a href="#">
        <svg viewBox="0 0 40 40" id="point" width="100%" height="100%">
          <path d="M34.6 7.1c0-1.1-1-2.1-2.1-2.1h-24c-1.1 0-2 1-2.1 2.1l-1.6 25C4.6 34.3 6.3 36 8.5 36h24c2.2 0 3.9-1.7 3.7-3.9l-1.6-25zm-5.9 6.1c-.2 4.6-3.7 8.2-8.3 8.2-4.6 0-8.2-3.7-8.4-8.3-.3-.2-.5-.6-.5-1 0-.7.6-1.2 1.3-1.2s1.3.6 1.3 1.2c0 .5-.3.9-.7 1.1.2 3.8 3.2 6.8 7.1 6.8 3.9 0 6.8-3.1 7-6.9-.4-.2-.6-.6-.6-1.1 0-.7.6-1.2 1.3-1.2s1.3.6 1.3 1.2c-.2.6-.4 1-.8 1.2z"></path>
        </svg>
        <div>
          <span>积分商城</span>
          <i class="iconfont icon-xiangyou"></i>
        </div>
      </a>
      <a href="#">
        <svg viewBox="0 0 40 40" id="vip" width="100%" height="100%">
          <path d="M7 33.4c0 1.1.9 1.6 2 1.6h22c1.1 0 2-.5 2-1.6V31H7v2.4z"></path>
          <path d="M32.1 14.3c-.6 2.3-2.6 4-5.1 4-2.9 0-5.3-2.3-5.3-5.2v-.2c-.5.2-1 .3-1.6.3-.6 0-1.1-.1-1.7-.3v.2c0 2.9-2.4 5.2-5.3 5.2-2.5 0-4.6-1.7-5.1-4.1-.5.4-1.2.6-1.8.6-.3 0-.5.1-.8 0L7.2 29h26l1.7-14.2c-.3.1-.5.1-.8.1-.8 0-1.5-.2-2-.6z" class="st0"></path>
          <ellipse cx="20.1" cy="8.2" rx="3.2" ry="3.2"></ellipse>
          <ellipse cx="6.4" cy="10.5" rx="2.4" ry="2.4"></ellipse>
          <ellipse cx="33.8" cy="10.5" rx="2.4" ry="2.4"></ellipse>
        </svg>
        <div>
          <span>饿了么会员卡</span>
          <i class="iconfont icon-xiangyou"></i>
        </div>
      </a>
    </section>
    <section class="common bottom">
      <a href="#">
        <svg viewBox="0 0 40 40" id="service" width="100%" height="100%" fill='#4AA5F0'>
          <g id="service_XMLID_1_">
            <path id="service_XMLID_6_" d="M32.2 9.5c-.2-.7-.1-.7-.4-.9-1.7-1.2-5.3.2-6.7 1.9-.8-3.8-3.8-6.1-4.7-5.9-.9-.2-4 2.1-4.8 5.9-1.3-1.7-5-3.1-6.7-1.9-.1.1-.5.6-.5.7C5.4 20.7 15 24.6 19 25.7v8.7c0 .7.3 1.2 1 1.2s1-.5 1-1.2v-8.6c4-1 14.2-4.8 11.2-16.3z"></path>
            <path id="service_XMLID_7_" d="M6 25c-.9 0-1.6.7-1.6 1.5.1.8.7 1.5 1.6 1.5 3.1 0 6.5 1.5 8.5 3.7.3.3.7.6 1.1.6.4 0 .7-.1 1-.4.6-.6.6-1.6.1-2.3C14.1 26.8 10 25 6 25z"></path>
            <path id="service_XMLID_8_" d="M34.6 25c-4 0-8.1 1.9-10.7 4.6-.6.6-.5 1.6.1 2.2.3.3.7.4 1 .4.4 0 .8-.3 1.1-.6 2-2.1 5.3-3.7 8.4-3.7h.1c.8 0 1.5-.7 1.5-1.5 0-.7-.7-1.4-1.5-1.4z"></path>
          </g>
        </svg>
        <div>
          <span>服务中心</span>
          <i class="iconfont icon-xiangyou"></i>
        </div>
      </a>
      <a href="#">
        <svg viewBox="0 0 40 40" id="download" width="100%" height="100%" fill='#3CABFF'>
          <path d="M30 5H10c-2.8 0-5 2.2-5 5v20c0 2.8 2.2 5 5 5h20c2.8 0 5-2.2 5-5V10c0-2.8-2.2-5-5-5zm-3.9 22.7c-.1.2-.3.4-.6.5-4.3 2.8-10.1 1.6-13-2.8-2.8-4.3-1.6-10.2 2.8-13 4.3-2.8 10.2-1.6 13 2.8.2.2.3.5.4.8.1.2 0 .5-.2.7l-8.8 5.7c-.2.2-.6.1-.7-.2l-.5-.7c-.4-.6-.2-1.5.4-1.9l5.6-3.6c.2-.2.3-.5.2-.7l-.1-.1c-2.2-1.8-5.4-2.1-7.9-.4-3.1 2-4 6.1-2 9.2 2 3.1 6.1 4 9.2 2 .6-.4 1.3-.2 1.7.4l.3.7c.1.2.4.5.2.6zm3.1-4.4l-.9.6c-.2.2-.6.1-.7-.2L26.5 22c-.2-.2-.1-.6.2-.7l1.8-1.1c.2-.2.6-.1.7.2l.6.9c.3.6.1 1.5-.6 2z"></path>
        </svg>
        <div>
          <span>下载饿了么APP</span>
          <i class="iconfont icon-xiangyou"></i>
        </div>
      </a>
    </section>
    <foot></foot>
  </div>
</template>

<script>
import foot from './Footer';
export default {
  name: 'personal',
  components: { foot },
  data() {
    return {
      loader: false,
      users: {
        phone: '',
        username: ''
      },
      url: '/login'
    }
  },
  mounted() {
    var objs = localStorage.getItem('mobile');
    // console.log(objs);
    if (objs !== null) {
      var obj = JSON.parse(objs);
      this.loader = true;
      this.users.phone = obj.phone.substring(0, 3) + '****' + obj.phone.substring(7, 11);
      this.users.username = obj.username;
      this.url = '/personal/info';
    }
  },
  methods: {
    back: function () {
      this.$router.push({
        path: '/'
      })
    }
  }
}
</script>

<style lang='scss' scoped>
@import '../../static/hotcss/px2rem.scss';

#personal {
  background-color: #F5F5F5;
  padding-bottom: px2rem(10);
  header {
    height: px2rem(44);
    >div {
      position: fixed;
      width: 100%;
      height: px2rem(44);
      z-index: 100;
      background-image: linear-gradient(to right, #00AAFF 0%, #0086FF 100%);
    }
    .hd-l {
      display: inline-block;
      width: px2rem(44);
      height: px2rem(44);
      text-align: center;
      vertical-align: top;
      line-height: px2rem(44);
      i {
        font-size: px2rem(18);
        color: #FFF;
      }
    }
    h2 {
      display: inline-block;
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%, 0);
      color: #FFF;
      line-height: px2rem(44);
      font-size: px2rem(18);
    }
  }
  .login {
    background-image: linear-gradient(to right, #00AAFF 0%, #0086FF 100%);
    a {
      display: inline-block;
      width: 100%;
      padding: px2rem(25) px2rem(15);
      box-sizing: border-box;
      color: #FFF;
      .icon-touxiang1 {
        display: inline-block;
        font-size: px2rem(60);
        color: #DDD;
        width: px2rem(60);
        height: px2rem(60);
        border-radius: 50%;
        overflow: hidden;
        background-color: #FFF;
        margin-right: px2rem(13);
        vertical-align: top;
      }
      .left {
        display: inline-block;
        vertical-align: top;
        padding-top: px2rem(6);
        h2 {
          font-weight: normal;
          padding-bottom: px2rem(8);
        }
        p {
          svg {
            width: px2rem(17);
            float: left;
            fill: #FFC636;
            padding-right: px2rem(2);
          }
          i {
            font-size: px2rem(18);
          }
        }
      }
      .icon-xiangyou {
        float: right;
        margin-top: px2rem(20);
        font-size: px2rem(16);
      }
    }
  }
  .points {
    font-size: 0;
    height: px2rem(173/2);
    background-color: #FFF;
    margin-bottom: px2rem(12);
    border-bottom: px2rem(0.5) solid #CCC;
    a {
      display: inline-block;
      width: 50%;
      font-size: px2rem(18);
      text-align: center;
      padding: px2rem(20) 0;
      color: #666;
      font-size: px2rem(14);
      box-sizing: border-box;
      i {
        display: block;
        font-size: px2rem(16);
        width: px2rem(26);
        height: px2rem(26);
        line-height: px2rem(26);
        margin-left: 50%;
        text-align: center;
        transform: translate(-50%, 0);
        border-radius: 50%;
        vertical-align: top;
        color: #FFF;
        margin-bottom: px2rem(5);
      }
    }
    a:first-child {
      border-right: px2rem(0.5) solid #CCC;
      i {
        background-color: #FF5F3E;
      }
    }
    a:last-child i {
      background-color: #6AC20B;
    }
  }
  .common {
    background-color: #FFF;
    margin-bottom: px2rem(12);
    a {
      display: inline-block;
      width: 100%;
      svg {
        width: px2rem(17);
        padding-right: px2rem(10);
        float: left;
        padding: px2rem(25/2) px2rem(15);
      }
      >div {
        display: flex;
        border-bottom: px2rem(0.5) solid #CCC;
        padding: px2rem(10) px2rem(10) px2rem(10) 0;
        justify-content: space-between;
        color: #333;
        font-size: px2rem(18);
        i {
          margin-top: px2rem(3);
          font-size: px2rem(16);
          color: #999;
        }
      }
    }
    a:first-child {
      fill: #4AA5F0;
    }
    a:nth-last-of-type(2) {
      fill: #FC7B53;
    }
    a:last-child {
      fill: #FFC636;
    }
  }
}
</style>
